<template>
<!--goRegister/goRegister.wxml-->
<view>
  <view class="form">
    <view class="userphone">
      <label>+86</label>
      <input type="text" placeholder="请输入手机号" v-model="phone" @focus="clearStatu()"/>
	 <view style="color: red; font-size: 16rpx;" v-if="stastc===1">手机格式错误</view>
    </view>

    <view class="validation">
      <label>验证码</label>
      <input type="text" placeholder="请输入验证码" v-model="code"/>
      <view class="yzm" @tap="onAddCode"><text>{{codeText}}</text></view>
	  <view style="color: red; font-size: 16rpx;" v-if="stastc===2">验证码错误</view>
    </view>

    <view class="pswd">
      <label>密码</label>
      <input type="password" placeholder="请设置密码" v-model="pwd" @focus="clearStatu()"/>
	  <view style="color: red; font-size: 16rpx;" v-if="stastc===3">密码不能为空</view>
    </view>

    <view class="psw">
      <label>确认密码</label>
      <input type="password" placeholder="请再次输入密码" v-model="new_pwd" @focus="clearStatu()"/>
	  <view style="color: red; font-size: 16rpx;" v-if="stastc===4">密码不一致</view>
    </view>

  </view>

  <view class="protocol">
    <checkbox checked="true" class="choice"></checkbox>
    <text style="color:#B5B5B5">登录或注册表示同意</text>
    <text>《用户协议》</text>
    <text style="color:#B5B5B5">与</text>
    <text>《隐私权证策》</text>
  </view>
  <view>
    <button style="width:520rpx;background:#00C6C2;margin-top:102rpx;color:#fff;" @click="onRegister"><text class="text">注册</text></button>
  </view>
  
</view>
</template>

<script>
let timeNum = 60; // 60s倒计时
// 60s倒计时
let countDownTime = timeNum;
let timer; //计时器
import {regis,getCode} from '@/api/index.js'
export default {
  data() {
    return {
      codeText: "获取验证码",
	  phone:'',
	  stastc:0,
		pwd:'',
		new_pwd:'',
		code:''
	  
    };
  },

  components: {
	  
  },
  props: {},
  methods: {
    // 计时器
    setInterval() {
      const that = this;
      timer = setInterval(() => {
        // 倒计时每秒减1 
        countDownTime--;

        if (countDownTime <= 1) {
          // 关闭计时器
          clearInterval(timer);
         
		  that.codeText = '再次获取验证码'
          countDownTime = timeNum;
        } else {
       
		  that.codeText = '剩余'+countDownTime.toString().padStart(2,'0') + 's'
        }
      }, 1000);
    },

    // 注册页获取验证码
    onAddCode() {
		let that = this
		let myreg = /^[1][1,3,2,4,5,7,8,9][0-9]{9}$/;
		if(!myreg.test(this.phone)){
			this.stastc =1
			return
		}
      if (countDownTime == timeNum) {
		  getCode(that.phone).then(ress=>{
			  // if(ress[1].data.code==103){
				 //  uni.showToast({
				 //  	title:ress[1].data.data,
					// icon:'none'
				 //  })
			  // }
		  }).catch(err=>{
			  if(err) 
			  console.log(err)
		  })
        uni.showToast({
          title: '验证码已发送',
          icon: 'none'
        }); // 调用计时器

        this.setInterval();
        
		
		this.codeText= '剩余'+countDownTime.toString().padStart(2,'0') + 's'
      } else {
        uni.showToast({
          title: '请等待验证码',
          icon: 'none'
        });
      }
    },

    // 注册
    onRegister() {
		// 对上面的内容进行判断
		
		let myreg = /^[1][1,3,2,4,5,7,8,9][0-9]{9}$/;
		if(!myreg.test(this.phone)){
			this.stastc =1
			return
		}
		if(this.pwd==''){
			this.stastc=3
			return
		}
		//验证两次密码输入是否正确
		if(this.pwd!=this.new_pwd || this.pwd =='' || this.new_pwd ==''){
			this.stastc = 4
			return
		}
		let data = {
			phone:this.phone,
			password:this.pwd,
			password2:this.new_pwd
			
		}
		let _this=this
		uni.showToast({
			icon:'loading',
			title:'注册中'
		})
		regis(data,_this.code).then(res=>{
			console.log(res)
			if(res[1].data.code==200){
				uni.hideToast()
				uni.showToast({
				  title: '注册成功',
				  icon: 'success',
				  duration: 2000
				}, 2000);
				setTimeout(() => {
				  uni.navigateBack({
				    delta: 1
				  });
				}, 2000);
			}
			
			
		}).catch(err=>{
			if(err){
				uni.showToast({
					title:'网络错误',
					icon:'none'
				})
			}
			console.log(err)
		})
      // uni.showToast({
      //   title: '注册成功',
      //   icon: 'success',
      //   duration: 2000
      // }, 2000);
      // setTimeout(() => {
      //   uni.navigateBack({
      //     delta: 1
      //   });
      // }, 2000);
    },
	//清除状态
	clearStatu(){
		this.stastc=false
	}

  }
};
</script>
<style>
@import "./goRegister.css";
</style>